<template>
   
    <div class="admin">
        <div class="container">
             <h3>
                   <div>账号中心</div>
                   <div><el-icon @click="back"><Right /></el-icon></div>
               </h3>
             <div class="user-image">
                  <img v-if="user.imgUrl"  :src="user.imgUrl" alt="">
             </div>
             <div class="opt">
               <span class="label">账号:</span>
               <el-input v-model="user.account"  style="width: 240px" placeholder="" size="large" disabled/>
               <span class="icon"><el-icon><Edit /></el-icon></span>
             </div>
             <div class="opt">
               <span class="label">昵称:</span>
               <el-input v-model="user.nickName" style="width: 240px" placeholder="" size="large" disabled/>
               <span class="icon"><el-icon><Edit /></el-icon></span>
             </div>
             <div class="opt">
               <span class="label">邮箱:</span>
               <el-input v-model="user.email"  style="width: 240px" placeholder="" size="large" disabled/>
               <span class="icon"><el-icon><Edit /></el-icon></span>
             </div>
             <div class="opt">
               <span class="label">手机号:</span>
               <el-input v-model="user.phone" style="width: 240px" placeholder="" size="large" disabled/>
               <span class="icon"><el-icon><Edit /></el-icon></span>
             </div>
             <div class="opt">
                <p>当前登录地址:</p>
                <div>{{ address  }}</div>
             </div>
             <div class="opt">
                <p>经纬度:</p>
                <div>{{ str  }}</div>
             </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.admin {
   background-color: #f0f0f0;
}
.container {
   width: 1200px;
   margin: 0 auto;
   background-color: #ffffff;
   min-height: 1000px;
   padding: 20px 15px;
   .opt {
       margin-top: 15px;
       display: flex;
       align-items: center;
       .label {
           display: inline-block;
           width: 150px;
           padding: 0 15px 0 0;
           text-align: right;
       }
       p {
           width: 150px;
           padding: 0 15px 0 0;
           text-align: right;
       }
       .icon {
           font-size: 24px;
           margin-left: 10px;
       }
   }
   .user-image {
       width: 150px;
       height: 150px;
       background-color: #f0f0f0;
       border-radius: 50%;
       overflow: hidden;
       margin-left: 120px;
       margin-bottom: 50px;
       img {
           width: 150px;
           height: 150px;
           border-radius: 50%;
       }
   }
   h3 {
       width: 100%;
       display: flex;
       justify-content: space-between;
       .el-icon {
           cursor: pointer;
           font-size: 24px;
           color: #666;
       }
   }
}
</style>
<script setup lang="ts">
import { ref } from 'vue';
import { getIpAdress , getAccountInfo } from '../api/request'
import api from '@/api/index';
import { useRouter } from 'vue-router'
let address = ref('')
let user = ref<any>({})
let token = localStorage.getItem("TOKEN");
let $router = useRouter();
let str = ref('');
if(token){
   getAccountInfo({token})
   .then(
       content=>{
        //    console.log(content)
           let {code , result} = content;
           if(code == 200) {
               let arr = result.map((item: any)=>{
                   item.imgUrl = api.url+item.imgUrl;
                   return item;
               })
               user.value = arr[0];
           }
       }
   )
}

getIpAdress()
.then(
   content=>{
       // console.log(content);
       let {status,city , country, lat, lon,query ,regionName} = content;
       if(status == "success"){
           address.value = `${country}-${regionName}-${city} IP:${query}`
           str.value = `${lon},${lat}`
       }
   }
)

const back = ()=> {
   $router.go(-1)
}
</script>